<#assign path = request.getContextPath()>
<#assign basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html >
<head >
<title>WebDesign Register</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- bootstrap -->
<link href="${path}/css/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="${path}/css/bootstrap/bootstrap-responsive.css" rel="stylesheet" />
<link href="${path}/css/bootstrap/bootstrap-overrides.css" type="text/css" rel="stylesheet" />

<!-- global styles -->
<link rel="stylesheet" type="text/css" href="${path}/css/layout.css" />
<link rel="stylesheet" type="text/css" href="${path}/css/elements.css" />
<link rel="stylesheet" type="text/css" href="${path}/css/icons.css" />

<!-- libraries -->
<link rel="stylesheet" type="text/css" href="${path}/css/lib/font-awesome.css" />

<!-- this page specific styles -->
<link rel="stylesheet" href="${path}/css/compiled/register.css" type="text/css"/> 

<!-- open sans font -->


<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

</head>
<body class="login-bg">
	<div class="row-fluid login-wrapper">
		<a href="../login.jsp"> <img class="logo"
			src="${path}/img/logo-login.png" />
		</a>

		<div class="span4 box">
			<div class="content-wrap">
				<h6>Register</h6>
				<form action="${path}/teacher/teacherRegister" method="post">
				<table>
					<tr style="margin-bottom:20px;font-size:13px;font-weight:bold">
						<td>工号</td>
						<td><input class="input" name="userId" type="text" id="userId" placeholder="*必填"/>
						</td>
						<td>  
                        <div id="userIdJS"></div>  
                    </td>
                    <td id="userIdMessage"></td>  
					</tr>
					<tr style="margin-bottom:20px;font-size:13px;font-weight:bold">
						<td>姓名</td>
						<td><input class="input" name="username" type="text" id="username" placeholder="*必填"/></td>
						<td>  
                        <div id="usernameJS"></div>  
                    </td>
					</tr>
					<tr style="margin-bottom:20px;font-size:13px;font-weight:bold">
						<td>密码</td>
						<td><input name="password" type="password" id="password" placeholder="*必填"/></td>
						<td>  
                        <div id="passwordJS"></div>  
                    </td>
					</tr>
					<tr style="margin-bottom:20px;font-size:13px;font-weight:bold">
						<td>确认密码</td>
						<td><input name="password2" type="password" id="password2" placeholder="*必填"/></td>
						<td>  
                        <div id="password2JS"></div>  
                    </td>
					</tr>
					<tr style="margin-bottom:20px;font-size:13px;font-weight:bold">
						<td>邮箱</td>
						<td><input name="email" type="text" id="email" placeholder="*必填"/></td>
						<td>  
                        <div id="emailJS"></div>  
                    </td>
					</tr>
					<tr style="margin-left:20px;font-size:13px">
						<td colspan="3" padding-right:40px><a href="${path}/homepage.jsp">返回</a></td>			
					</tr>
				</table>			
					
					 <p class="loginerror message" id="message">注册成功！请等待管理员审核!</p>
       				 
					<input type="button" id="submit" value="注册" onclick="return register()" class="btn-glow primary login" style="margin-left:0px"/>  
				</form>
			</div>
		</div>
	</div>
</body>
<script src="${path}/js/jquery-latest.js"></script>
<script type="text/javascript">

	$().ready(function() {  
		isNullValidate("#userId", "工号不能为空","请输入您的工号，该工号将作为登录"),
    	isNullValidate("#username", "用户名不能为空","请输入您的姓名"),   
    	isNullValidate("#password", "密码不能为空","请设置您的密码"),  
   	 	isNullValidate("#password2", "确认密码不能为空","请输入常用密码"),  
    	isNullValidate("#email","邮箱不能为空","请设置您的邮箱")  
    	validateEmail(),  
    	validateEqual("#password","#password2","密码不一致")  
	})  

	//isNull校验是否为空  
	function isNullValidate(id, message,messageTip) {  
		//失去焦点 进行校验  
		$(id).blur(function(){  
		isNull(id,message);  
		});  
		//得到焦点显示的提示信息  
		$(id).focus(function(){  
		showTip(id,messageTip);  
		});  
	}  
	function showTip(id,messageTip){  
		var idJS= id + "JS";  
		$(idJS).css({"color":"black"});  
		showMessage(idJS,messageTip);  
	}  
	function isNull(id,message){  
		var value = $(id).val();  
		var idJS = id + "JS";  
		if (value == null || value == "") {  
    		$(idJS).css({"color":"red"});  
    		$(id).css({"background":"gray","border-color":"red","border":""});  
    		showMessage(idJS, message);  
    		return false;  
		} else
		{  
    		$(id).css({"background":"white"});  
    		showMessage(idJS, "");  
    		showPic(idJS);  
    		return true;  
		}  
	}  
	//validateEqual校验是否相等  
	function validateEqual(id1, id2, message) {  
		$(id2).blur(function() {  
			validate_equal(id1,id2,message);  
		})  
	}  
	function validate_equal(id1,id2,message){  
		var idJS2 = id2 + "JS";  
		var value1 = $(id1).val();  
		var value2 = $(id2).val();  
		if (value1 != value2) {  
    		showMessage(idJS2, message);  
    		$(idJS2).css({"color":"red"});  
    		$(id2).css({"background":"gray","border-color":"red","border":""});  
    		$(id1).css({"background":"gray","border-color":"red","border":""});  
    		return false;  
		} else {  
   			$(id1).css({"background":"white"});  
   			$(id2).css({"background":"white"});  
    		showMessage(idJS2, "");  
    		showPic(idJS2);  
    		return true;  
		}  
	}  
	//validateEmali校验email格式  
	function validateEmail() {  
		$("#email").blur(function(){  
		isEmail();  
		} )  
	}  
	function isEmail(){  
    	var email = $("#email").val();  
   	 	var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;  
    	if (reg.test(email)) {  
        	return true;  
    	} else {  
        	showMessage("#emailJS", "Email格式不正确");  
        	$("#emailJS").css({"color":"red"});  
        	$("#email").css({"background":"gray","border-color":"red","border":""});  
        	return false;  
        }  
	}  
	//showMessage工具方法，显示某id需要显示的信息  
	function showMessage(id, message) {  
		$(id).html(message);  
	}  
	function showPic(id) {  
		$(id).append("<img src='${path}/img/register.png'></img>");  
	}  
	function register()
	{
		$("#message").hide();
		if(isNull("#userId", "工号不能为空","#userIdJS")
			&& isNull("#username", "用户名不能为空","#usernameJS")  
		    && isNull("#password", "密码不能为空","#passwordJS")  
			&& isNull("#password2", "确认密码不能为空","#password2JS") 
			&& isNull("#email","邮箱不能为空","#emailJS")  
			&& isEmail()  
			&& validate_equal("#password","#password2","密码不一致"))
			{  
				var userId=document.getElementsByName("userId")[0].value;
				var username=document.getElementsByName("username")[0].value;
				var password=document.getElementsByName("password")[0].value;
				var password2=document.getElementsByName("password2")[0].value;
				var email=document.getElementsByName("email")[0].value;
				$.ajax({
					url : "${path}/ateacher/teacherRegister",
					data: {userId:userId,username:username,password:password,password2:password2,email:email},
					type : "post",
					dataType : "json",
					error : function() {
						$('#SecondList').append('请求出错！');
					},
					success : function(responseResult) {
						if(responseResult.flag == "success"){
							$("#message").show();
							//alert("注册成功！请等待管理员审核！"); 
						}else if(responseResult.flag == "wrong"){
							showMessage("#userIdJS","该工号已注册，请更换注册名");  
	                    	$("#userId").css({"background":"gray","border-color":"red","border":""});       
	                    	$("#userIdJS").css({"color":"red"}); 
						}
					}
				});
	    	}  	
	}
</script>

</html>